<template>
	<!--和值玩法-->
	<div class="xiazhu_div">

		<!-- 0-9生肖 -->
		<ul class="xiazhu_chakan_ul">
			<li class="xiazhu_chakan_li" v-for="(item,index) in list" :key="index" :class="{active:matchClass(index)}" @click="changeMatch(index)">
				<!--<img :src="item.src" alt />-->
				{{item.shuzi}}
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'wanfa',
		data() {
			return {
				//  动物图片
				list: [{
						id: "0",
						shuzi: "0"
					}, {
						id: "1",
						shuzi: "1"
					},
					{
						id: "2",
						shuzi: "2"
					},
					{
						id: "3",
						shuzi: "3"
					},
					{
						id: "4",
						shuzi: "4"
					},
					{
						id: "5",
						shuzi: "5"
					},
					{
						id: "6",
						shuzi: "6"
					},
					{
						id: "7",
						shuzi: "7"
					},
					{
						id: "8",
						shuzi: "8"
					},
					{
						id: "9",
						shuzi: "9"
					},
					{
						id: "10",
						shuzi: "10"
					},
					{
						id: "11",
						shuzi: "11"
					},
					{
						id: "12",
						shuzi: "12"
					},
					{
						id: "13",
						shuzi: "13"
					},
					{
						id: "14",
						shuzi: "14"
					},
					{
						id: "15",
						shuzi: "15"
					},
					{
						id: "16",
						shuzi: "16"
					},
					{
						id: "17",
						shuzi: "17"
					},
					{
						id: "18",
						shuzi: "18"
					},
					{
						id: "19",
						shuzi: "19"
					},
					{
						id: "20",
						shuzi: "20"
					},
					{
						id: "21",
						shuzi: "21"
					},
					{
						id: "22",
						shuzi: "22"
					},
					{
						id: "23",
						shuzi: "23"
					},
					{
						id: "24",
						shuzi: "24"
					},

					{
						id: "25",
						shuzi: "25"
					},
					{
						id: "26",
						shuzi: "26"
					},
					{
						id: "27",
						shuzi: "27"
					}

				],
				activeIndex: [], //此时要改变颜色的动物 下标 所有选中的数据 都在里面
				isred: null
			};
		},
		methods: {
      clear(){
        this.activeIndex = []
      },
			//   点击0-9图片匹配 includes选中的数据 有该项下标时 返回true 没有返回false
			matchClass(index) {
				return this.activeIndex.includes(index);
			},
			//  单独点击下面动物改变
			changeMatch(index) {
				// 声明一个这个数组中有没有这个下标
				let bol = this.activeIndex.includes(index);
				if(bol) {
					// 若是选中这个，则删除一个这个index
					this.activeIndex.splice(this.activeIndex.indexOf(index), 1);
				} else {
					// 若是没有，则添加这个下标
					this.activeIndex.push(index);
				}
				this.$emit('getActiveData', this.activeIndex)
			}
		}
	}
</script>

<style scoped="scoped">
	.xuanze_xiazhu_ul .xuanze_xiazhu_li.red {
		background: #d21d17;
		color: #fff;
		border: none;
	}

	.xiazhu_chakan_ul .xiazhu_chakan_li.active {
		background: #d21d17 !important;
	}
</style>
